<template>
  <section>
    <el-card>
      <el-col class="toolbar">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="search.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <label>城市</label>
            <el-select v-model="search.cityName">
              <el-option-group v-for="group in cities" :label="group.text">
                <el-option v-for="item in group.children" :label="item.text" :value="item.value"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label>类型</label>
            <el-select v-model="selectType" clearable placeholder="请选择">
              <el-option v-for="item in types" :label="item.typeCnValue" :value="item.typeValue"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label>状态</label>
            <el-select v-model="selectValue" clearable placeholder="请选择">
              <el-option v-for="item in status" :label="item.value" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="page.rows" highlight-current-row stripe border v-loading="listLoading">
        <el-table-column prop="name" label="名称" sortable></el-table-column>
        <el-table-column prop="username" label="联系人" sortable></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="userType" label="类型" sortable>
          <template scope="scope">
            <el-tag :type="scope.row.userType === '零售商' ? 'primary' : ''">
              {{scope.row.userType}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" sortable></el-table-column>
        <el-table-column prop="cityName" label="城市" sortable></el-table-column>
        <el-table-column prop="createdAt" label="创建日期" sortable></el-table-column>
        <el-table-column label="操作" width="160">
          <template scope="scope">
            <el-button-group>
              <el-button :disabled="scope.row.userType !== '贸易商'" title="首页轮播" icon="plus" size="mini"></el-button>
              <el-button title="查看商户详情" icon="information" size="mini" @click="handleDetail(scope.row)"></el-button>
              <el-button title="编辑商户" icon="edit" size="mini" @click="handleEdit(scope.row)"></el-button>
              <el-button title="收货地址管理" icon="setting" size="mini" @click="handleEditReceiver(scope.row)"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-col :span="24" class="toolPage">
        <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
          :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
          </el-pagination>
      </el-col>
    </el-card>
  </section>
</template>

<script>
  export default {
    beforeMount() {
      this.loadGridData()
      this.loadStatus()
      this.loadTypes()
      this.loadCities()
    },
    data() {
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
          rows: []
        },
        search: {
          name: '',
          phone: '',
          cityName: '',
        },
        status: [{
          name: '',
          value: ''
        }],
        types: [{
          typeValue: '',
          typeCnValue: ''
        }],
        cities: [{
          text: '',
          value: ''
        }],
        selectValue: '',
        selectType: '',
        listLoading: true
      }
    },
    methods: {
      handleSizeChange(size) {
        this.page.size = size
        this.loadGridData()
      },
      handlePageChange(current) {
        this.page.current = current
        this.loadGridData()
      },
      loadGridData() {
        this.listLoading = true
        let param = {
          pageSize: this.page.size,
          page: this.page.current,
          name: this.search.name,
          phone: this.search.phone,
          cityName: this.search.cityName,
          status: this.selectValue,
          type: this.selectType
        }
        this.axios.get("/users", { params: param }).then(response => {
          this.page = response.data,
            this.listLoading = false
        })
      },
      loadStatus() {
        this.axios.get("/users/status").then(response => { this.status = response.data })
      },
      loadTypes() {
        this.axios.get("/users/types").then(response => { this.types = response.data })
      },
      handleSearch() {
        this.loadGridData()
      },
      handleEdit(row) {
        this.$router.push(`/users/${row.id}/edit`)
      },
      handleDetail(row) {
        this.$router.push(`/users/${row.id}`)
      },
      handleEditReceiver(row) {
        this.$router.push(`/users/${row.id}/receivers`)
      },
      loadCities() {
        this.axios.get("/cities").then(response => { this.cities = response.data })
      }
    }
  }

</script>